<script setup>
import { reactive, toRefs } from 'vue'
// 结构获取数据
const user = reactive({
  name: '张三',
  age: 18
})
// 使用toRefs函数解决结构之后失去响应式的问题
const {name, age} = toRefs(user)
// toRefs结构之后的数据成了一个ref数据
console.log(name.value, age.value)
</script>

<template>
  <div class="ref-page">
    <p>姓名: {{name}}</p>
    <p>年龄: {{age}}</p>
    <button @click="age++">长大了</button>
  </div>
</template>

<style scoped></style>
